<template>
  <div class="listBox">
    <a-row class="tableHead" type="flex">
      <a-col span="1">
        <a-checkbox @change="checkAll" :checked="checked"></a-checkbox>
      </a-col>
      <a-col v-for="(item, index) in headList" :key="index" :span="item.span">
        {{ item.title }}
      </a-col>
    </a-row>
    <OrderItem
      v-for="item in orderList"
      :list_th="headList"
      :selectedRowKeys="selectedRowKeys"
      @chooseOrder="chooseOrder"
      @triggerAction="
        e => {
          $emit('triggerAction', e)
        }
      "
      :key="item.id"
      :order="item"
    ></OrderItem>
  </div>
</template>

<script>
import OrderItem from './OrderItem.vue'
export default {
  components: {
    OrderItem
  },
  props: {
    orderList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  watch: {
    selectedRowKeys: {
      handler(e) {
        let checked = false
        if (e.length === this.orderList.length) {
          checked = true
        }

        this.checked = checked
      },
      deep: true
    }
  },

  methods: {
    chooseOrder(e) {
      let { selectedRowKeys } = this,
        index = selectedRowKeys.findIndex(el => el.id === e.id)

      if (index === -1) {
        selectedRowKeys.push(e)
      } else {
        selectedRowKeys.splice(index, 1)
      }
    },

    checkAll(e) {
      let { checked } = e.target,
        { orderList, selectedRowKeys } = this

      if (checked) {
        selectedRowKeys = orderList
      } else {
        selectedRowKeys = []
      }

      this.selectedRowKeys = selectedRowKeys
      this.checked = checked
    }
  },

  data() {
    return {
      checked: false,
      selectedRowKeys: [],

      headList: [
        { type: 'name', title: '商品信息', span: 4 },
        { type: 'count', title: '单价/数量', span: 2 },
        { type: 'discount', title: '优惠', span: 2 },
        { type: 'pay_price', title: '实收款', span: 2 },
        { type: 'send_type', title: '买家/配送方式', span: 3 },
        { type: 'pay_time', title: '商城/下单时间', span: 3 },
         { type: 'stbz_trans_status', title: '转单状态', span: 2 },
        { type: 'status', title: '订单状态', span: 2 },
        {
          type: 'action',
          title: '操作',
          span: 3
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.listBox {
  width: 100%;
  .tableHead {
    width: 100%;
    height: 54px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>
